<template>
  <div>
    <el-card shadow="never" class="margin-30">
      <div slot="header">
        <el-button type="primary" size="mini" @click="goAddAddress">新增</el-button>

      </div>
      <el-table :data="addressList" border stripe>
        <el-table-column
          type="index"
          label="#"
          width="50"
          align="center"
        />
        <el-table-column
          prop="addressName"
          label="地址名称"
          align="center"
        />
        <el-table-column
          prop="addressName"
          label="默认发货地址"
        >
          <template slot-scope="scope">
            <!-- sendStatus (integer, optional): 默认发货地址：0->否；1->是 -->
            <el-switch v-model="scope.row.sendStatus" :active-value="1" :inactive-value="0" />

          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="收货人姓名"
        />
        <el-table-column
          prop="phone"
          label="收货人电话"
        />
        <el-table-column
          label="收货人地址"
        >
          <template slot-scope="scope">
            <div>
              <p> {{ scope.row.province }} {{ scope.row.city }} {{ scope.row.region }} </p>
              <p>{{ scope.row.detailAddress }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="addressName"
          label="默认收货地址"
        >
          <template slot-scope="scope">
            <!-- receiveStatus (integer, optional): 是否默认收货地址：0->否；1->是 , -->
            <el-switch v-model="scope.row.receiveStatus" :active-value="1" :inactive-value="0" @change="receiveStatusChange(scope.row.id)" />

          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="收货人电话"
        />
        <el-table-column

          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="text" style="color:#409eff" size="mini" @click="goEditAddress(scope.row.id)">编辑</el-button>
            <el-button type="text" style="color:red" size="mini">删除</el-button>

          </template>
        </el-table-column>
      </el-table>

    </el-card>
    <DialogView ref="dialogview" @refresh="refreshAddressList" />
  </div>
</template>
<script>
import {
  addressList as addressListApi,
  setReceiveOne as setReceiveOneApi

} from '@/api/order/address'
import DialogView from './components/DialogView.vue'
export default {
  name: 'Address',
  components: {
    DialogView
  },
  mixins: [],
  data() {
    return {

      addressList: []

    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.getAddressList()
  },
  mounted() {
  },
  methods: {
    async getAddressList() {
      const res = await addressListApi()
      const { success, data, message } = res
      if (success) {
        this.addressList = data.items
      } else {
        this.$message.error(message)
      }
    },
    // 打开对话框
    goAddAddress() {
      this.$refs.dialogview.openDialog('')
    },
    // 刷新列表
    refreshAddressList() {
      this.getAddressList()
    },
    // 修改收货地址默认状态
    async receiveStatusChange(id) {
      const res = await setReceiveOneApi({ id })
      const { success, message } = res
      if (success) {
        this.$message.success('状态修改成功')
        // 刷新数据
        this.getAddressList()
      } else {
        this.$message.error(message)
      }
    },
    // 去编辑
    goEditAddress(id) {
      this.$refs.dialogview.openDialog(id)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
